<template>
  <view class="content">
    <view class="list" :style="'gap:' + gap + 'rpx'">
      <u-tag
        @click="change(item,i)"
        :size="size"
        :bgColor="active === i ? activeBgColor : bgColor"
        :color="active === i ? activeColor : color"
        :border-color="active === i ? '#EBF5FF' : bgColor"
        v-for="(item, i) in tagList"
        :key="i"
        :text="item.name"
        shape="circle"
      ></u-tag>
    </view>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},

  props: {
    gap: {
      type: Number,
      default: 40,
    },
    tagList: {
      type: Array,
    },
    active: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "#5f5f5f",
    },
    bgColor: {
      type: String,
      default: "#F3F3F3",
    },
    size: {
      type: String,
      default: "medium",
    },
    activeBgColor: {
      type: String,
      default: "#EBF5FF",
    },
    activeColor: {
      type: String,
      default: "#016FDD",
    },
  },
  data() {
    return {};
  },
  methods: {
    change(item,i) {
      this.$emit("change", [item,i]);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.content {
  padding: 0rpx 0;
  .list {
    display: flex;
    align-items: center;
    //padding-left:30rpx ;
  }
}
</style>

